<template>
  <div class="content">
    <div class="login-center">
      <h2>管理系统</h2>
      <el-form
        :model="loginForm"
        :status-icon="false"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
        size="medile"
      >
        <el-form-item prop="Uname">
          <el-input
            type="text"
            v-model="loginForm.Uname"
            autocomplete="off"
            placeholder="请输入用户名/邮箱/手机号"
            prefix-icon="iconfont icon-yonghu1"
            @keydown.native.enter="submitForm('ruleForm')"
          ></el-input>
        </el-form-item>
        <el-form-item prop="Pwd">
          <el-input
            :type="flag ? 'password' : 'text'"
            v-model="loginForm.Pwd"
            autocomplete="off"
            placeholder="请输入密码"
            prefix-icon="iconfont icon-mima"
            @keydown.native.enter="submitForm('ruleForm')"
          >
            <template #suffix>
              <i
                class="iconfont point"
                :class="flag ? 'icon-eyes' : 'icon-eyes-'"
                @click="flag = !flag"
              ></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="isClick"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 引入login
// 在 vue中 @/代表从根目录开始
import { login } from '@/api/users.js'
export default {
  data() {
    var validateUname = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名'))
      } else {
        callback()
      }
    }
    var validatePwd = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        callback()
      }
    }
    return {
      // 表单数据对象
      loginForm: {
        Uname: '',
        Pwd: ''
      },
      rules: {
        Uname: [{ validator: validateUname, trigger: 'blur' }],
        Pwd: [{ validator: validatePwd, trigger: 'blur' }]
      },
      flag: true,
      isClick: false
    }
  },
  methods: {
    submitForm(formName) {
      this.loading = true
      this.$refs[formName].validate(async (valid) => {
        // 当表单验证全部通过时（在这里是全部不为空时）
        if (valid) {
          this.isClick = true
          const { code, msg, data } = await login({
            username: this.loginForm.Uname,
            password: this.loginForm.Pwd
          })
          if (code === 1) {
            this.$message.success(msg)
            // 保存用户信息和taken值
            localStorage.setItem('users', JSON.stringify(data))
            //  setTimeout(() => {
            this.$router.push('/')
            //    }, 1000)
          } else {
            this.isClick = false
            this.$message.error(msg)
          }
        } else {
          this.loading = false
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.content {
  height: 100%;
  display: flex;
  justify-content: right;
  align-items: top;
  // padding: 30px;
  background: url('../../assets/imgs/login-bg1.jpg') no-repeat;
  background-size: 100%;
  .login-center {
    margin-right: 200px;
    margin-bottom: 35px;
    width: 470px;
    height: 350px;
    border-radius: 10px;
    h2 {
      text-align: center;
      color: #fff;
      letter-spacing: 5px;
      margin-bottom: 30px;
    }
    .el-form-item {
      //   text-align: center;
      padding: 0 50px;

      //   display: flex;
      //   justify-content: center;
      .el-input {
        //   margin: 0 auto;
        width: 350px;
        // padding-left: 30px;
        // text-align: center;
        // margin-bottom: 20px;
      }
      .el-button {
        width: 350px;
        margin-top: 30px;
      }
    }
  }
}
</style>
